<template>
  <div id="box">
    <div class="card">
      <div id="login">
        <div class="right">
          <h1>酒席管理系统</h1>
        </div>
        <div class="left">
          <span><el-link href="#">返回首页</el-link></span>
          <div class="from">
            <h2>用户登录</h2>
            <el-form
              :model="ruleForm"
              status-icon
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input
                  type="password"
                  v-model="ruleForm.password"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="验证码" prop="captcha">
                <el-col :span="16">
                  <el-input v-model="ruleForm.captcha"></el-input>
                </el-col>
                <el-col :span="8" style="height: 40px">
                  <el-image
                    v-if="captchaImage"
                    class="captcha-image"
                    :src="captchaImage"
                    @click="refreshCaptcha()"
                  ></el-image>
                </el-col>
              </el-form-item>
              <div class="box">
                <el-checkbox v-model="ruleForm.isWeeklyDurationEnabled"
                  >一周免登录</el-checkbox
                >|
                <el-link href="#" target="_blank">忘记密码？</el-link>
              </div>
              <el-form-item>
                <el-button
                  type="primary"
                  @click="submitForm('ruleForm')"
                  style="width: 100%"
                  >登录</el-button
                >
              </el-form-item>
              <el-form-item>
                <el-button
                  @click="resetForm('ruleForm')"
                  style="width: 100%; margin: auto"
                  >注册</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {login,getCaptchaImage} from '@/api/login'
export default {
  data() {
    let checkName = (_rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };
    let checkPass = (_rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    let checkCaptcha = (_rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        username: "",
        password: "",
        captcha: "",
        isWeeklyDurationEnabled: false,
      },
      captchaImage: "",
      rules: {
        username: [{ validator: checkName, trigger: "blur" }],
        password: [{ validator: checkPass, trigger: "blur" }],
        captcha: [{ validator: checkCaptcha, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          login(this.ruleForm).then((result) => {
              if (result.data.code === "200") {
                console.log(result.data.data.refreshToken)
                localStorage.setItem('refreshToken', result.data.data.refreshToken);
                // this.$axios.defaults.headers.common['refreshToken'] = `${result.data.data.refreshToken}`;
                this.$router.push('/index');
                this.$message({
                  message: result.data.msg,
                  type: "success",
                });
              }
              if (result.data.code === "500") {
                this.refreshCaptcha();
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    refreshCaptcha() {
      getCaptchaImage().then((result) => {
        this.captchaImage = result.data.data;
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  mounted() {
    this.refreshCaptcha();
  },
};
</script>
<style>
#box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 98vh;
  min-width: 1088px;
  min-height: 716px;
}
#box .card {
  width: 1088px;
  height: 716px;
  background-image: url(../../assets/login.png);
}
#login {
  display: flex;
  margin-left: 30px;
  margin-top: 15px;
  width: 1028px;
  height: 656px;
  min-width: 1028px;
  min-height: 656px;
}
#login .right {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}
#login .right h1 {
  text-align: center;
  color: #fff;
}
#login .left {
  flex: 1;
  padding: 20px;
}
#login .left > span {
  float: right;
}
#login .left > .from > h2 {
  margin-left: 100px;
  width: 260px;
}
#login .left .from {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 380px;
  text-align: center;
}
#login .left .from .box {
  margin: 0px 0 15px 0;
}
.captcha-image {
  cursor: pointer;
}
.captcha-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>